<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线生成调试</title>
</head>
<script type="text/javascript" src="/webjars/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/webjars/github-com-sentsin-layer/3.0.3/src/layer.js"></script>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
<body style="background-color: #f5f5f5;">
<#include "hearder.ftl"/>
<div>
    <form role="form">
        <div class="form-group-in" style="padding: 20px">
            <table>
                <tr>
                    <td><label for="name">模型ID：</label></td>
                    <td><input type="text" id="modelIdInput" class="form-control"
                               placeholder="应用模型ID"></td>
                    <td><label for="name">字段名：</label></td>
                    <td><input type="text" id="codeNameInput" class="form-control"
                               placeholder="应用模型字段名"></td>
                </tr>
                <#--<tr>-->
                    <#--<td><label for="name">字段名:</label></td>-->
                    <#--<td><input type="text" id="codeNameInput" class="form-control"-->
                               <#--placeholder="应用模型字段名"></td>-->
                <#--</tr>-->
            </table>
            <br>
            <button onclick="doSubmit()" type="button" style="width: 200px;" class="btn btn-code center-block"
                    aria-hidden="true">生成表达式
            </button>
            <label for="name" style="font-size: 21px">可填入ML的表达式</label>
            <textarea id="inputAreain" class="form-control" rows="12">public class Main
            {
                public static void main(String[] args){
                    System.out.println("hello world!");
            }
        }
        </textarea>
        </div>

    </form>
    <form role="form">
        <div class="form-group" style="padding: 20px">
            <label for="name" style="font-size: 21px">表达式在线调试</label>

            <div style="padding: 20px">
                <label class="form-inline">
                    <label> 模型字段参数值：</label>
                    <input type="text" id="argsInput" class="form-control"
                           placeholder="模型字段参数值">
                </label>
            </div>

            <textarea id="inputArea" class="form-control" rows="15">public class Main
            {
                public static void main(String[] args){
                    System.out.println("hello world!");
            }
        }
        </textarea>
        </div>
        <#--<div style="padding: 20px">-->
            <#--<label class="form-inline">-->
                <#--<input type="checkbox" id="timeLimitCheckBox" value="timeLimit" onclick="timeLimitClick()"> 限时-->
                <#--<input type="text" id="timeLimitInput" style="display: none" class="form-control"-->
                       <#--placeholder="1000(单位：毫秒,默认1S)">-->
            <#--</label>-->
        <#--</div>-->
        <#--<div style="padding: 20px">-->
            <#--<label class="form-inline">-->
                <#--<input type="checkbox" id="argsCheckBox" onclick="argsCheckBoxClick()"> 输入参数-->
                <#--<input type="text" id="argsInput" style="display: none" class="form-control"-->
                       <#--placeholder="在此输入args参数,多个以空格分隔">-->
            <#--</label>-->
        <#--</div>-->

        <button onclick="doSubmit()" type="button" style="width: 200px" class="btn btn-run center-block"
                aria-hidden="true">运行
        </button>

        <br>

        <div style="padding: 20px">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">运行信息</h3>
                </div>
                <div class="panel-body" id="complieInfoDiv">
                </div>
            </div>
        </div>

        <div style="padding: 20px">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">运行结果</h3>
                </div>
                <div class="panel-body" id="resultDiv" style="color: red;">

                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script>

    function doSubmit() {
        var url = "/complie";
        var excuteTimeLimit = $("#timeLimitInput").val().trim();
        var excuteArgs = $("#argsInput").val().trim();
        if ($("#timeLimitCheckBox").prop("checked")) {
            if (excuteTimeLimit == "") {
                excuteTimeLimit = 1000;
            }
        } else {
            excuteTimeLimit = null;
        }
        if ($("#argsCheckBox").prop("checked")) {
            if (excuteArgs == "") {
                excuteArgs = null;
            }
        } else {
            excuteArgs = null;
        }
        var data = {"javaSource": $("#inputArea").val(), "excuteTimeLimit": excuteTimeLimit, "excuteArgs": excuteArgs};
        $.post(url, data, function (result) {
            layer.msg("结果:" + result.message);
            //设置执行信息
            $("#complieInfoDiv").html("运行耗时(毫秒)：" + result.excuteDurationTime + "<br>编译状态：" + result.message);
            //设置执行结果
            $("#resultDiv").html(result.excuteResult);
        });
    }

    function timeLimitClick() {
        if ($("#timeLimitCheckBox").prop("checked")) {
            $("#timeLimitInput").show();
        } else {
            $("#timeLimitInput").hide();
        }
    }

    function argsCheckBoxClick() {
        if ($("#argsCheckBox").prop("checked")) {
            $("#argsInput").show();
        } else {
            $("#argsInput").hide();
        }
    }
</script>
<style>

    .btn-code{
        color: #fff;
        background-color: deepskyblue;
        border-color: deepskyblue;
    }

    .btn-run{
        color: #fff;
        background-color: #008e00;
        border-color: #008e00;
    }
</style>
</html>